<template>
  <div class="file-list-wrapper">
    <!-- 操作按钮 -->
    <el-header class="file-list-header" v-if="selectionFile.length!=0">
      <OperationMenu
        :operationFile="operationFile"
        :selectionFile="selectionFile"
        :filepath="filepath"
        :storageValue="storageValue"
        @showStorage="showStorage"
        @getTableDataByType="getTableDataByType"
        @setMoveFileDialogData="setMoveFileDialogData"
      ></OperationMenu>
    </el-header>
    <div v-if="selectionFile.length==0" style="padding-top: 10px;"></div>
    <div class="middle-wrapper">
      <!-- 面包屑导航栏 -->
      <BreadCrumb class="breadcrumb"></BreadCrumb>
      <div style="width: 200px;">
        <el-input 
        size="mini" 
        style="border:1px;border-radius:20px" 
        suffix-icon="el-icon-search"
        placeholder="输入文件名搜索"
        v-model="searchFileName"
        @change="searchFileByName"
        v-show="!filetype"
        >
        </el-input>
      </div>
      <!-- 图片展示模式 -->
      <div class="change-image-model" v-show="filetype === 1">
        <el-radio-group v-model="imageGroupLable" size="mini" @change="changeImageDisplayModel">
          <el-radio-button :label="0">列表</el-radio-button>
          <el-radio-button :label="1">网格</el-radio-button>
          <el-radio-button :label="2">时间线</el-radio-button>
        </el-radio-group>
      </div>
      <!-- 选择表格列 -->
      <!-- <SelectColumn class="select-column"></SelectColumn> -->
    </div>
    <!-- 文件列表表格 -->
    <FileTable
      :fileList="fileList"
      :loading="loading"
      v-show="!imageModel || filetype !== 1"
      @setMoveFileDialogData="setMoveFileDialogData"
      @setOperationFile="setOperationFile"
      @setSelectionFile="setSelectionFile"
      @showStorage="showStorage"
      @getTableDataByType="getTableDataByType"
      @getImgReviewData="getImgReviewData"
    ></FileTable>
    <!-- 图片网格模式 -->
    <ImageModel
      class="image-model"
      v-if="imageModel && filetype === 1"
      :fileList="fileList"
      @getImgReviewData="getImgReviewData"
    ></ImageModel>
    <!-- 移动文件模态框 -->
    <MoveFileDialog
      :dialogMoveFile="dialogMoveFile"
      @setSelectFileId="setSelectFileId"
      @confirmMoveFile="confirmMoveFile"
      @setMoveFileDialogData="setMoveFileDialogData"
    ></MoveFileDialog>
    <!-- 查看大图 -->
    <ImgReview :imgReview="imgReview" @getImgReviewData="getImgReviewData"></ImgReview>

    <div style="position:fixed;bottom:40px;right:50px;z-index:100" >
      <el-tooltip content="点击新建文件夹" placement="top" v-if="!filetype">
        <el-button type="warning" icon="el-icon-folder-add" circle style="margin-bottom:10px;" @click="addFolder()"></el-button>  
      </el-tooltip>
      <el-upload
        class="upload-demo"
        multiple
        :with-credentials='true'
        :action="fileUploadUrl"
        :show-file-list="false"
        :data="uploadFileData"
        :on-success="uploadFileSuccess"
      >
        <el-tooltip content="点击上传文件" placement="top">
          <el-button type="primary" icon="el-icon-upload" circle ></el-button>  
        </el-tooltip>
      </el-upload>
      
    </div>

    <!-- <el-button type="primary" icon="el-icon-plus" size='medium' circle style="position:absolute;right:40px;bottom:40px"></el-button> -->
  </div>
</template>

<script>
import OperationMenu from './components/OperationMenu'
import BreadCrumb from './components/BreadCrumb'
import SelectColumn from './components/SelectColumn'
import FileTable from './components/FileTable'
import ImageModel from './components/ImageModel'
import MoveFileDialog from './components/MoveFileDialog'
import ImgReview from './components/ImgReview'
import { BASE_URL } from '@/request/base.js'
import {
  getfilelist,
  selectFileByFileType,
  getFileTree,
  getstorage,
  moveFile,
  batchMoveFile,
  uploadUrl,
  createFile,
  searchFile
} from '@/request/file.js'

export default {
  name: 'FileList',
  components: {
    OperationMenu,
    BreadCrumb,
    SelectColumn,
    FileTable,
    ImageModel,
    MoveFileDialog,
    ImgReview
  },
  data() {
    return {
      storageValue: {
        total: '',
        totalValue: 0,
        used: '',
        usedValue: 0
      },
      searchFileName:'',
      visible: false,
      fileNameSearch: '',
      loading: true, //  表格数据-loading
      fileList: [], //  表格数据-文件列表
      //  移动文件模态框数据
      dialogMoveFile: {
        isBatchMove: false,
        visible: false, //  是否可见
        fileTree: [] //  目录树
      },
      selectFileId: '', //  移动文件路径id
      operationFile: {}, // 当前操作行
      selectionFile: [], // 勾选的文件
      // filetype: '', //  文件类型
      //  可以识别的文件类型
      fileImgTypeList: [
        'png',
        'jpg',
        'jpeg',
        'docx',
        'doc',
        'ppt',
        'pptx',
        'xls',
        'xlsx',
        'avi',
        'mp4',
        'css',
        'csv',
        'chm',
        'rar',
        'zip',
        'dmg',
        'mp3',
        'open',
        'pdf',
        'rtf',
        'txt',
        'oa',
        'js',
        'html',
        'img',
        'sql',
        'jar',
        'svg',
        'gif',
        'json',
        'exe'
      ],
      //  文件图片Map映射
      fileImgMap: {
        dir: require('@/assets/images/file/dir.png'),
        chm: require('@/assets/images/file/file_chm.png'),
        css: require('@/assets/images/file/file_css.png'),
        csv: require('@/assets/images/file/file_csv.png'),
        png: require('@/assets/images/file/file_pic.png'),
        jpg: require('@/assets/images/file/file_pic.png'),
        jpeg: require('@/assets/images/file/file_pic.png'),
        docx: require('@/assets/images/file/file_word.png'),
        doc: require('@/assets/images/file/file_word.png'),
        ppt: require('@/assets/images/file/file_ppt.png'),
        pptx: require('@/assets/images/file/file_ppt.png'),
        xls: require('@/assets/images/file/file_excel.png'),
        xlsx: require('@/assets/images/file/file_excel.png'),
        mp4: require('@/assets/images/file/file_video.png'),
        avi: require('@/assets/images/file/file_avi.png'),
        rar: require('@/assets/images/file/file_rar.png'),
        zip: require('@/assets/images/file/file_zip.png'),
        dmg: require('@/assets/images/file/file_dmg.png'),
        mp3: require('@/assets/images/file/file_music.png'),
        open: require('@/assets/images/file/file_open.png'),
        pdf: require('@/assets/images/file/file_pdf.png'),
        rtf: require('@/assets/images/file/file_rtf.png'),
        txt: require('@/assets/images/file/file_txt.png'),
        oa: require('@/assets/images/file/file_oa.png'),
        unknown: require('@/assets/images/file/file_unknown.png'),
        js: require('@/assets/images/file/file_js.png'),
        html: require('@/assets/images/file/file_html.png'),
        img: require('@/assets/images/file/file_img.png'),
        sql: require('@/assets/images/file/file_sql.png'),
        jar: require('@/assets/images/file/file_jar.png'),
        svg: require('@/assets/images/file/file_svg.png'),
        gif: require('@/assets/images/file/file_gif.png'),
        json: require('@/assets/images/file/file_json.png'),
        exe: require('@/assets/images/file/file_exe.png')
      },
      //  查看图片模态框数据
      imgReview: {
        visible: false,
        fileurl: '',
        filename: '',
        extendname: '',
        filepath: ''
      },
      imageGroupLable: 0
    }
  },
  computed: {
    fileUploadUrl() {
      return BASE_URL + '/file/upload'
    },
    // 上传文件参数
    uploadFileData: {
      get() {
        let res = {
          filepath: this.filepath,
          isdir: 0
        }
        return res
      },
      set() {
        return {
          filepath: '/',
          isdir: 0
        }
      }
    },
    //  当前查看的文件路径
    filepath: {
      get() {
        let filePath = this.$route.query.filepath
        return filePath ? filePath : '/'
      },
      set() {
        return ''
      }
    },
    filetype: {
      get() {
        let type = Number(this.$route.query.filetype)
        return  type ? type : 0
      },
      set() {
        return 0
      }
    },
    imageModel() {
      return this.$store.getters.imageModel
    }
  },
  created() {
    this.getTableDataByType()
    this.showStorage()
  },
  mounted() {
    this.imageGroupLable = this.imageModel
  },
  methods: {
    // 搜索文件
    searchFileByName() {
      let data = {
        filename: this.searchFileName
      }
      searchFile(data).then(res => {
        if (res.code == 200) {
          this.fileList = res.data
        }
      })
    },
    //  新建文件夹按钮：打开模态框
    addFolder() {
      this.$prompt('请输入文件夹名称', '创建文件夹', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(({ value }) => {
          this.createFile(value)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    //  新建文件夹模态框-确定按钮
    /* 不要再这个函数中加任何内容，一加就报错，我也不知道为什么 */
    createFile(fileName) {
      let data = {
        filename: fileName,
        filepath: this.filepath,
        isdir: 1
      }
      createFile(data).then(res => {
        if (res.code == 200) {
          this.$message.success('添加成功')
          this.getTableDataByType()
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    //  上传文件
    uploadFileSuccess(result) {
      if (result.code == 200) {
        this.$message.success('上传成功')
        this.getTableDataByType()
        this.showStorage()
      } else {
        this.$message.error(result.msg)
      }
    },
    /**
     * 表格数据获取相关事件
     */
    getTableDataByType() {
      if (Number(this.filetype)) {
        //  分类型
        this.showFileListByType()
      } else {
        //  全部文件
        this.showFileList()
      }
    },
    //  获取当前路径下的文件列表
    showFileList() {
      let data = {
        filepath: this.filepath
      }
      getfilelist(data).then(res => {
        if (res.code == 200) {
          this.fileList = res.data ? res.data : []
          this.loading = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  根据文件类型展示文件列表
    showFileListByType() {
      //  分类型
      let data = {
        filetype: this.filetype
      }
      selectFileByFileType(data).then(res => {
        if (res.code == 200) {
          this.fileList = res.data ? res.data : []
          this.loading = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  根据文件扩展名设置文件图片
    setFileImg(extendname) {
      if (extendname === null) {
        //  文件夹
        return this.fileImgMap.dir
      } else if (!this.fileImgTypeList.includes(extendname)) {
        //  无法识别文件类型的文件
        return this.fileImgMap.unknown
      } else {
        //  可以识别文件类型的文件
        return this.fileImgMap[extendname]
      }
    },
    //  计算文件大小
    calculateFileSize(size) {
      const B = 1024
      const KB = Math.pow(1024, 2)
      const MB = Math.pow(1024, 3)
      const GB = Math.pow(1024, 4)
      if (!size) {
        return '_'
      } else if (size < KB) {
        return (size / B).toFixed(0) + 'KB'
      } else if (size < MB) {
        return (size / KB).toFixed(1) + 'MB'
      } else if (size < GB) {
        return (size / MB).toFixed(2) + 'GB'
      } else {
        return (size / GB).toFixed(3) + 'TB'
      }
    },

    /**
     * 表格勾选框事件
     */
    //  勾选的行
    setSelectionFile(selection) {
      this.selectionFile = selection
    },

    /**
     * 移动按钮相关事件
     */
    //  当前操作行
    setOperationFile(operationFile) {
      this.operationFile = operationFile
    },
    //  设置移动文件模态框相关数据，isBatchMove为null时是确认移动，值由之前的值而定
    setMoveFileDialogData(isBatchMove, visible) {
      this.initFileTree()
      this.dialogMoveFile.isBatchMove = isBatchMove
        ? isBatchMove
        : this.dialogMoveFile.isBatchMove
      this.dialogMoveFile.visible = visible
    },
    //  移动文件模态框：初始化文件目录树
    initFileTree() {
      getFileTree().then(res => {
        if (res.code == 200) {
          this.dialogMoveFile.fileTree = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    //  设置移动后的文件路径
    setSelectFileId(selectFileId) {
      this.selectFileId = selectFileId
    },
    //  移动文件模态框-确定按钮事件
    confirmMoveFile() {
      if (this.dialogMoveFile.isBatchMove) {
        //  批量移动
        let data = {
          newfilepath: this.selectFileId,
          files: JSON.stringify(this.selectionFile)
        }
        batchMoveFile(data).then(res => {
          if (res.code == 200) {
            this.$message.success(res.data)
            this.getTableDataByType()
            this.dialogMoveFile.visible = false
            this.selectionFile = []
          } else {
            this.$message.error(res.msg)
          }
        })
      } else {
        //  单文件移动
        let data = {
          oldfilepath: this.operationFile.filepath,
          id: this.selectFileId,
          filename: this.operationFile.filename,
          extendname: this.operationFile.extendname
        }
        moveFile(data).then(res => {
          if (res.code == 200) {
            this.$message.success('移动文件成功')
            this.getTableDataByType()
            this.dialogMoveFile.visible = false
          } else {
            this.$message.error(res.msg)
          }
        })
      }
    },

    //  获取已占用内存
    showStorage() {
      getstorage().then(res => {
        if (res.code == 200) {
          let totalSize = res.data.total ? res.data.total : 0
          let usedSize = res.data.used ? res.data.used : 0
          this.storageValue.totalValue = totalSize
          this.storageValue.usedValue = usedSize
          const B = 1024
          const KB = Math.pow(1024, 2)
          const MB = Math.pow(1024, 3)
          const GB = Math.pow(1024, 4)
          if (totalSize == null) {
            this.storageValue.total = 0 + 'KB'
          } else if (totalSize < KB) {
            this.storageValue.total = (totalSize / B).toFixed(0) + 'KB'
          } else if (totalSize < MB) {
            this.storageValue.total = (totalSize / KB).toFixed(2) + 'MB'
          } else if (totalSize < GB) {
            this.storageValue.total = (totalSize / MB).toFixed(3) + 'GB'
          } else {
            this.storageValue.total = (totalSize / GB).toFixed(4) + 'TB'
          }
          if (!usedSize) {
            this.storageValue.used = 0 + 'KB'
          } else if (usedSize < KB) {
            this.storageValue.used = (usedSize / B).toFixed(0) + 'KB'
          } else if (usedSize < MB) {
            this.storageValue.used = (usedSize / KB).toFixed(2) + 'MB'
          } else if (usedSize < GB) {
            this.storageValue.used = (usedSize / MB).toFixed(3) + 'GB'
          } else {
            this.storageValue.used = (usedSize / GB).toFixed(4) + 'TB'
          }
          this.$store.commit('changeStorageInfoObj', this.storageValue)
        } else {
          this.$message.error(res.msg)
        }
      })
    },

    //  切换图片查看模式
    changeImageDisplayModel(label) {
      this.$store.commit('changeImageModel', label)
    },

    //  获取查看大图的数据
    getImgReviewData(row, visible) {
      if(row) {
        this.imgReview.fileurl = row.fileurl
        this.imgReview.filename = row.filename
        this.imgReview.extendname = row.extendname
        this.imgReview.filepath = row.filepath
      }
      this.imgReview.visible = visible
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'
.file-list-wrapper
  .file-list-header
    .el-dialog-div
      height 200px
      overflow auto
  .middle-wrapper
    display flex
    .breadcrumb
      flex 1
    .change-image-model
      margin-right 20px
      height 30px
      line-height 30px
</style>